<template>
    <div id="app" class="webapp">
        <swiper class="swiper" :options="swiperOption" ref="wrapperSwiper">
            <swiper-slide class="swiper__slider">
                <button class="arrow" @click="nextPage"></button>
                <p1 :animate="animated==0"></p1>
            </swiper-slide>
            <swiper-slide class="swiper__slider">
                <button class="arrow" @click="nextPage"></button>
                <p2 :animate="animated==1"></p2>
            </swiper-slide>
            <swiper-slide class="swiper__slider">
                <button class="arrow" @click="nextPage"></button>
                <p3 :animate="animated==2"></p3>
            </swiper-slide>
            <swiper-slide class="swiper__slider">
                <button class="arrow" @click="nextPage"></button>
                <p4 :animate="animated==3"></p4>
            </swiper-slide>
            <swiper-slide class="swiper__slider">
                <p5 :animate="animated==4" :next="nextPage"></p5>
            </swiper-slide>
            <swiper-slide class="swiper__slider">
                <p6 :animate="animated==5"></p6>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import P1 from './components/P1'
import P2 from './components/P2'
import P3 from './components/P3'
import P4 from './components/P4'
import P5 from './components/P5'
import P6 from './components/P6'

const FastClick = require('fastclick')
FastClick.attach(document.body)

export default {
    name: 'app',
    data () {
        let th = this;
        return {
            animated: 0,
            destoryed: false,
            swiperOption: {
                notNextTick: true,
                direction : 'vertical',
                onTouchStart(res){
                    if (th.destoryed) {
                        return false;
                    }
                    // 如果是填写资料和资料完成页面，禁止滑动
                    let v = res.activeIndex;
                    if (v === 4) {
                        th.swiper.lockSwipeToNext();
                    } else if (v === 5) {
                        if (th.swiper.isEnd){
                            th.destoryed = true;
                            th.swiper.destroy();
                        }
                    } else {
                        th.swiper.unlockSwipeToNext();
                    }
                },
                onTransitionStart(){
                    if (th.destoryed) {
                        return false;
                    }

                    
                    // 让激活的input失去焦点
                    let focusInput = document.querySelector('input:focus');
                    if (focusInput) {
                        focusInput.blur();
                        focusInput = null;
                        th.swiper.enableTouchControl();
                    }
                },
                onTransitionEnd(res){
                    if (th.destoryed) {
                        return false;
                    }

                    th.swiper.enableTouchControl();
                    th.animated = res.activeIndex;
                    if (th.swiper.isEnd){
                        th.destoryed = true;
                        setTimeout(() => {
                            th.swiper.destroy();
                        })
                    }
                },
            }
        }
    },
    mounted () {
        var h = window.innerHeight;
        var w = window.innerWidth;
        // 针对iphone4添加body样式
        if (w == 640 && h <= 960 && (/iPhone/gi).test(navigator.userAgent)) {
            document.body.classList.add('ip4');
        }
        document.body.style.height = h + 'px';
    },
    methods: {
        nextPage() {
            // 如果不是最后一个，往后滚
            if (!this.swiper.isEnd){
                this.swiper.unlockSwipeToNext();
                let next = this.swiper.activeIndex + 1;
                this.swiper.slideNext(() => {}, 300, false);
            }
        }
    },
    computed: {
        swiper() {
            return this.$refs.wrapperSwiper.swiper;
        }
    },
    components: {
        P1,
        P2,
        P3,
        P4,
        P5,
        P6,
    }
}
</script>

<style lang="scss">
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.webapp {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #121212;
}
.swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    &__slider {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
    }
}
.x-toast.success {
    .x-toast__inner {
        padding: 0.3rem;
        p {
            text-align: center;
        }
    }
    .x-toast__inner:before {
        content: "";
        display: block;
        width: 1.5rem;
        height: 1rem;
        background: url("assets/images/icon_success.png");
        background-size: 100% 100%;
        margin-bottom: 0.2rem;
    }
}
.fadeInTop {
    transform: translate(0, .1rem);
    opacity: 0;
    transition: all 0.3s ease-out;
    &.done {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.fadeInRight {
    transform: translate(-.1rem, 0);
    opacity: 0;
    transition: all 0.3s ease-out;
    &.done {
        transform: translate(0, 0);
        opacity: 1;
    }
}
.fadeLine {
    transform: scale(0,1);
    transform-origin: center;
    &.done {
        transition: transform 0.5s ease-out;
        transform: scale(1,1);
    }
}
.fadeScale {
    transform: scale(.6,.6);
    opacity: 0;
    transform-origin: center;
    &.done {
        transition: all 0.24s ease-out;
        transform: scale(1,1);
        opacity: 1;
    }
}
.fadeBg {
    transform: scale(1.2,1.2);
    transform-origin: center;
    &.done {
        transition: transform 10s ease-out;
        transform: scale(1,1);
    }
}
.arrow {
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    margin-left: -.4rem;
    z-index: 9999;
    width: 0.8rem;
    height: 0.8rem;
    background: url("assets/images/icon_arrow.png") center center no-repeat rgba(0,0,0,0.5);
    background-size: 0.6rem 0.6rem;
    border-radius: 50%;
    opacity: 0;
    transform: translate(0,5px);
    -webkit-animation: "swipeUpIcon" 2s linear 1.5s infinite;
    display: block;
}
@-webkit-keyframes swipeUpIcon {
	0%{ -webkit-transform: translate(0,5px); opacity: 0;}
	10%{ -webkit-transform: translate(0,0); opacity: 1;}
	50%{ -webkit-transform: translate(0,0); opacity: 1;}
	70%{ -webkit-transform: translate(0,5px); opacity: 1;}
	80%{ -webkit-transform: translate(0,-20px); opacity: 0;}
	100%{ -webkit-transform: translate(0,5px); opacity: 0;}
}
</style>
